<template>
    <div class="addressList">
        <div class="navHead">
            <van-nav-bar
                :border="false"
                title="收货地址"
                left-arrow
                @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <div class="addressWrap bg-white-pk text-black-pk">
            <div v-for="(i,k) in userExpressList" :key="k" class="light-border-bottom-gray">
                <div class="light-border-bottom-gray">
                    <div class="addressItem page-pad-pk">
                        <div class="d-flex-pk">
                            <div class="pad-right-item">{{i.name}}</div>
                            <div>{{i.mobile}}</div>
                        </div>
                        <div>{{i.province}}{{i.city}}{{i.area}}{{i.address}}</div>
                    </div>
                </div>
                <div class="light-border-bottom-gray">
                    <div class="pad-item-operate page-pad-pk">
                        <div v-if="i.isDefault==='1'">
                            <van-checkbox v-model="isDefault" checked-color="D82D11"><span
                                class="text-red-pk">已设为默认</span></van-checkbox>
                        </div>
                        <div v-if="i.isDefault === '0'"
                             @click="setDefaultExpress(i.expressId)">
                            <van-checkbox><span class="text-gray-b3-pk">设为默认</span></van-checkbox>
                        </div>
                        <div class="operateItem text-light-pk">
                            <div class="operateBtn" @click="editUserExpress(k)"> 编辑</div>
                            <div class="operateBtn" @click="removeUserExpress(i.expressId)">删除</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center-pk addAddress" @click="createUserExpress">
            <div class="operateBtn">添加新地址</div>
        </div>
        <div class="setWrap">
            <div class="showItem">
                <van-popup v-model="editaddresspopup" closeable :style="{ height: '230px',width:'80%' }">
                    <div class="text-center-pk setNickName">
                        <div v-show="setStatus.createStatus" class="addTitle">添加地址</div>
                        <div v-show="setStatus.editStatus" class="addTitle">编辑地址</div>
                        <div class="d-flex-pk">
                            <div>
                                <van-field v-model="addInfo.name" placeholder="收货人姓名"/>
                            </div>
                            <div>
                                <van-field v-model="addInfo.mobile" placeholder="联系电话"/>
                            </div>
                        </div>
                        <div class="chooseAddress" @click="openCheckAddPopup">
                            <van-cell v-if="addInfo.area" center :title="addressInfo" value-class="valueItem"
                                      is-link></van-cell>
                            <van-cell v-else center title="选择地区" value-class="valueItem" is-link></van-cell>
                        </div>
                        <div>
                            <van-field v-model="addInfo.address" placeholder="详细地址(如街道、小区、乡镇、村)"/>
                        </div>
                        <div class="bg-D82D11 submitBtn text-white-pk" @click="saveUserExpress">确定</div>
                    </div>
                </van-popup>
            </div>
        </div>
        <div class="popupWrap">
            <van-popup v-model="checkaddresspopup"
                       closeable
                       position="bottom"
                       :style="{ height: '300px',width:'100%' }">
                <div>请选择</div>
                <div class="">
                    <div v-for="(vp,kp) in province" :key="kp" class="provinceName">
                        <div @click="getDistrictList(vp.id,1,kp)" data-rank="0" :data-index="kp" class="extName">
                            {{vp.extName}}
                        </div>
                        <div v-show="vp.level" v-for="(vc,kc) in vp.childDistrictList" :key="kc" class="">
                            <div @click="getDistrictList(vc.id,2,kc)" data-rank="1" :data-index="kc" class="cityName">
                                {{vc.extName}}
                            </div>
                            <div v-show="vc.level" v-for="(va,ka) in vc.childDistrictList" :key="va.id"
                                 @click="doTown(kp,kc,ka)" class="addressName">{{va.extName}}
                            </div>
                        </div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    import {Dialog} from 'vant';

    export default {
        data() {
            return {
                userExpressList: [],
                title: '收货地址',
                expressList: [],
                header: {
                    Authorization: '',
                    AppId: ''
                },
                addInfo: {
                    "name": '',
                    "mobile": '',
                    "province": '',
                    "provinceId": '',
                    "city": '',
                    "cityId": '',
                    "area": '',
                    "areaId": '',
                    "address": '',
                    "userId": ''
                },
                province: [],
                city: [],
                area: [],
                setStatus: {
                    editStatus: false,
                    createStatus: true,
                },
                expressInfo: {},
                flag: 0,
                removeExpressId: [],
                addressInfo: "",
                isDefault: true,//设置默认地址
                checked: false,


            }
        },
        components: {
            [Dialog.Component.name]: Dialog.Component
        },
        created() {
            this.getUserExpress();
        },
        methods: {
           /* toBack() {
                this.$router.push({path: this.$store.state.prePath})
            },*/
            getUserExpress() {
                this.$api.getUserExpress().then(res => {
                    let result = this.$resData(res);
                    if (result) {
                        this.userExpressList = result;
                    }
                })
            },
            //添加地址
            createUserExpress() {
                this.editaddresspopup = true;
                this.setStatus.editStatus = false;
                this.setStatus.createStatus = true;
            },
            //保存地址
            saveUserExpress() {
                if (this.addInfo.mobile === '') {
                    this.$toast({
                        message: "请输入收货人手机号码"
                    });
                    return false;
                }
                if (this.addInfo.name === '') {
                    this.$toast({
                        message: "请输入手机号码"
                    });
                    return false;
                }
                if (this.addInfo.address === '') {
                    this.$toast({
                        message: "请输入地址"
                    });
                    return false;
                }
                if (this.addInfo.area === '') {
                    this.$toast({
                        message: "请选择地区"
                    });
                    return false;
                }
                this.$api.saveUserExpress(
                    this.addInfo
                ).then(res => {
                    let result = this.$resData(res);
                    if (result) {
                        this.$toast({
                            message: '保存成功',
                        });
                        this.editaddresspopup = false;
                        this.getUserExpress();
                    } else {
                        return false;
                    }

                });

            },
            //选择地区
            openCheckAddPopup() {
                this.getDistrictList(0, 0);
                this.checkaddresspopup = true;
            },
            getDistrictList(id, level, index) {
                if (id == 0) {
                    this.$api.getDistrictList({id}, this.$header).then((data) => {
                        let result = this.$resData(data);
                        if (result) {
                            this.province = result;
                            return false;
                        } else {
                            return false;
                        }
                    });
                } else if (level == 1) {
                    /* this.addInfo.province = this.province[index].; */
                    if (level == 1) {
                        if (this.province[index].childDistrictList == null) {
                            this.$api.getDistrictList({id}, this.$header).then((data) => {
                                let result = this.$resData(data);
                                if (result) {
                                    this.city = result;
                                    this.province[index].childDistrictList = this.city;
                                    this.province[index].level = true;
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            if (this.province[index].level) {
                                this.province[index].level = false;
                            } else {
                                this.province[index].level = true;
                            }
                        }

                    }
                } else {
                    /* this.addInfo.city = event.target.innerText; */
                    if (level == 2) {
                        if (this.city[index].childDistrictList == null) {
                            this.$api.getDistrictList({id}, this.$header).then((data) => {
                                let result = this.$resData(data);
                                if (result) {
                                    this.area = result;
                                    this.city[index].childDistrictList = this.area;
                                    this.city[index].level = true;
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            if (this.city[index].level) {
                                this.city[index].level = false;
                            } else {
                                this.city[index].level = true;
                            }
                        }

                    }
                }
            },
            //收起地址列表
            doTown(pIndex, cIndex, aIndex) {
                this.addInfo.province = this.province[pIndex].extName;
                this.addInfo.provinceId = this.province[pIndex].id;
                this.addInfo.city = this.city[cIndex].extName;
                this.addInfo.cityId = this.city[cIndex].id;
                this.addInfo.area = this.area[aIndex].extName;
                this.addInfo.areaId = this.area[aIndex].id;
                this.checkaddresspopup = false;
                this.addressInfo = this.addInfo.province + " " + this.addInfo.city + " " + this.addInfo.area

            },

            //编辑地址
            editUserExpress(index) {
                this.setStatus.editStatus = true;
                this.setStatus.createStatus = false;
                this.addInfo = this.userExpressList[index];
                this.addressInfo = this.addInfo.province + " " + this.addInfo.city + " " + this.addInfo.area;
                this.editaddresspopup = true;
            },
            //删除地址
            removeUserExpress(expressId) {
                Dialog.confirm({
                    title: '温馨提示',
                    message: '是否删除地址'
                }).then(() => {
                    this.$api.removeUserExpress(expressId).then(res => {
                        let result = this.$resResult(res);
                        if (result) {
                            this.$toast({
                                message: "删除成功"
                            })
                            this.getUserExpress();
                        } else {
                            this.$toast({
                                message: "删除失败"
                            })
                        }
                    })
                }).catch(() => {
                    this.getUserExpress();
                });
            },

            //设置默认地址
            setDefaultExpress(expressId) {
                this.$api.setDefaultUserExpress(expressId).then(res => {
                    let result = this.$resResult(res);
                    if (result) {
                        this.getUserExpress();
                    } else {
                        this.$toast({
                            message: '设置失败'
                        })
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .addressList {
        .pad-right-item {
            padding-right: 10px;
        }

        .pad-item-operate {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .navHead {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }

        .addressWrap {
            line-height: 1.8;
            padding-top: 48px;

            .addressItem {
                align-items: center;
                padding-bottom: 10px;
                padding-top: 10px;
            }

            .operateItem {
                text-align: right;
                margin-top: -28px;
            }

            .operateBtn {
                border-radius: 5px;
                padding: 5px;
                display: inline-block;
                box-sizing: border-box;
                /*width: 70px;
                height: 22px;*/
                line-height: 14px;
                text-align: center;
                margin-left: 5px;
                margin-top: 5px;;
            }
        }

        .addAddress {
            margin-top: 35px;

            .operateBtn {
                width: 80%;
                background-color: #D82D11;
                color: white;
                border-radius: 5px;
                padding: 10px;
                display: inline-block;
                box-sizing: border-box;
                /*width: 70px;
                height: 22px;*/
                line-height: 14px;
                text-align: center;
                margin-left: 5px;
                margin-top: 5px;;
            }
        }

        .setWrap {
            .showItem {
                .van-popup--center {
                    top: 250px;
                }

                .van-cell {
                    line-height: 20px;
                    background: none;
                }

                .setNickName {
                    padding-top: 17px;

                    .submitBtn {
                        width: 80%;
                        border-radius: 5px;

                        margin: 10px auto;
                        padding: 5px 0;
                    }
                }
            }

            .chooseAddress {
                .van-cell {
                    padding: 10px 10px;
                    text-align: left;
                }
            }

            .addTitle {
                padding-bottom: 10px;
            }
        }

        .popupWrap {
            .van-popup--bottom {
                padding: 10px 0 10px 10px;
                line-height: 2.6;
            }

            .provinceName {
                /* padding: 0.5rem;*/
                border-top: 1px solid #f5f5f5;
                /*     font-weight: 700;*/
            }

            .cityName {
                /*color: #007bff;*/
                border-top: 1px solid #f5f5f5;
                padding-left: 1.3rem;
                /* padding:.5rem 0;*/
            }

            .addressName {
                /*color: #6c757d;*/
                border-top: 1px solid #f5f5f5;
                padding-left: 2.5rem;
                /*padding:.5rem 0;*/
            }


        }

    }
</style>
